<template>

  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="密码名称">
          <el-input placeholder="请输入密码名称" v-model.trim="searchPsPasswordParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="账号">
          <el-input placeholder="请输入账号" v-model.trim="searchPsPasswordParam.account" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="家庭成员">
          <el-select v-model="searchPsPasswordParam.userMemberFamilyId" placeholder="请选择所属家庭成员" clearable>
            <el-option
              v-for="item in userMemberFamilyIdList"
              :key="item.id"
              :label="item.userName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="密码类型">
          <el-select v-model="searchPsPasswordParam.typeId" placeholder="请选择密码类型" clearable>
            <el-option
              v-for="item in passwordTypeIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="绑定手机">
          <el-input placeholder="请输入绑定手机" v-model.trim="searchPsPasswordParam.phone" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="网站名称">
          <el-input placeholder="请输入网站名称" v-model.trim="searchPsPasswordParam.webName" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="getPasswordAll">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryPsPassword">重置</el-button>
          <el-button type="warning" size="mini" @click="openSavePsPassword">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>


    <el-card style="margin-top: 10px">

      <el-table
        :data="passwordTable.data"
        max-height="630px"
        height="630px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="名称"
        >
        </el-table-column>

        <el-table-column
          prop="passwordTypeName"
          label="密码类型"
        >
          <!--<template slot-scope="scope">-->
          <!--  <el-tag type="success" size="mini">{{scope.row.passwordTypeName}}</el-tag>-->
          <!--</template>-->
        </el-table-column>

        <el-table-column
          prop="account"
          label="账号"
        >
        </el-table-column>

        <!--<el-table-column-->
        <!--  prop="password"-->
        <!--  label="密码1"-->
        <!--&gt;-->
        <!--</el-table-column>-->

        <el-table-column
          prop="userMemberFamilyName"
          label="所属家庭成员"
        >
        </el-table-column>

        <el-table-column
          prop="describe"
          label="描述"
        >
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="toOpenPsPasswordDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="openUpdPsPassword(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delPsPasswordByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>


    </el-card>


    <PasswordManagementSaveUpd ref="psPasswordSaveUpdRef" @getPasswordAll="getPasswordAll"></PasswordManagementSaveUpd>
    <PasswordManagementDetailed ref="psPasswordDetailedRef" ></PasswordManagementDetailed>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import PasswordManagementSaveUpd from './PasswordManagementSaveUpd.vue'
  import PasswordManagementDetailed from './PasswordManagementDetailed.vue'


  export default {
    // 密码管理
    name: "PasswordManagement",
    components: {
      PasswordManagementSaveUpd,
      PasswordManagementDetailed,
    },
    data(){
      return {
        // 查询请求参数
        searchPsPasswordParam: {
          name: null,
          userMemberFamilyId: null,
          typeId: null,
          account: null,
          phone: null,
          webName: null,
        },
        // 家庭成员列表
        userMemberFamilyIdList: [],
        // 密码类型
        passwordTypeIdList: [],
        // 表格参数
        passwordTable:{
          // 表格中的数据
          data: [],
        },
      }
    },
    methods: {
      /**
       * 打开新增的弹出框
       */
      openSavePsPassword(){
        this.$refs.psPasswordSaveUpdRef.openPagePsPassword('save', null, this.passwordTypeIdList, this.userMemberFamilyIdList)
      },
      /**
       * 打开密码修改弹出框
       * @param row 当前行数据
       */
      openUpdPsPassword(row){
        this.$refs.psPasswordSaveUpdRef.openPagePsPassword('upd', row, this.passwordTypeIdList, this.userMemberFamilyIdList)
      },
      /**
       * 打开密码弹出框详情页面
       * @param row
       */
      toOpenPsPasswordDetailed(row){
        this.$refs.psPasswordDetailedRef.openPsPasswordDetailed(row)
      },
      /**
       * 删除提示
       */
      delPsPasswordByIdTips(row){
        this.$confirm('是否删除密码, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delPsPasswordById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 逻辑删除密码
       */
      delPsPasswordById(row){
        http.post("/cypher/delPsPasswordById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getPasswordAll()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据条件查询全部的密码
       */
      getPasswordAll(){
        http.post("/cypher/getPasswordAll", this.searchPsPasswordParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.passwordTable.data = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询参数
       */
      resetQueryPsPassword(){
        this.searchPsPasswordParam = {
          name: null,
          userMemberFamilyId: null,
          account: null,
          phone: null,
          webName: null,
        }
      },
      /**
       * 获取家庭成员类型选项
       */
      getMemberFamilyAll(){
        http.get("/user/getMemberFamilyAll", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.userMemberFamilyIdList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取密码类型
       */
      getPsPasswordType(){
        http.post("/cypher/getPsPasswordType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.passwordTypeIdList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getPasswordAll()
      this.getMemberFamilyAll()
      this.getPsPasswordType()
    },
  }
</script>

<style scoped>

</style>
